<template>
  <div class="box-card-div">
    <el-card
        v-loading="loading"
        element-loading-text="拼命登录中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        class="box-card">
      <div slot="header">
        <span>登录</span>
      </div>

      <div style="height: 100px ; display: flex ; flex-direction: column ; justify-content: space-between ">
        <el-row>
          <el-col :span="6">
            <div style="display: flex; justify-content: center;align-items: center ; height: 40px">用户名</div>
          </el-col>
          <el-col :span="18">
            <div>
              <el-input v-model="user.username" placeholder="请输入内容" clearable></el-input>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <div style="display: flex; justify-content: center;align-items: center ; height: 40px">密码</div>
          </el-col>
          <el-col :span="18">
            <div>
              <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
            </div>
          </el-col>
        </el-row>
      </div>

      <div style="height: 50px ;display: flex ; flex-direction: column ; justify-content: center">
        <div>
          <el-button type="primary" v-on:click="doLogin">登录</el-button>
        </div>
      </div>

    </el-card>
  </div>


  <!--  <div >-->
  <!--    <el-card class="box-card">-->
  <!--      <div slot="header" >-->
  <!--        <span>登录</span>-->
  <!--      </div>-->

  <!--      <div style="height: 100px ">-->
  <!--        <el-row>-->
  <!--          <el-col :span="6">-->
  <!--            <div >用户名</div>-->
  <!--          </el-col>-->
  <!--          <el-col :span="18">-->
  <!--            <div >-->
  <!--              <el-input v-model="user.username" placeholder="请输入内容" clearable></el-input>-->
  <!--            </div>-->
  <!--          </el-col>-->
  <!--        </el-row>-->

  <!--        <el-row>-->
  <!--          <el-col :span="6">-->
  <!--            <div >密码</div>-->
  <!--          </el-col>-->
  <!--          <el-col :span="18">-->
  <!--            <div class="grid-content bg-purple-dark">-->
  <!--              <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>-->
  <!--            </div>-->
  <!--          </el-col>-->
  <!--        </el-row>-->
  <!--      </div>-->

  <!--        <div>-->
  <!--          <el-button type="primary" v-on:click="doLogin">登录</el-button>-->
  <!--        </div>-->
  <!--    </el-card>-->
  <!--  <div>-->
  <!--    <el-button type="primary" v-on:click="doLogin">登录</el-button>-->
  <!--  </div>-->

  <!--  </div>-->


</template>

<script>
// const axios = require("axios")

import {postKeyValueRequest} from "@/util/api";

export default {
  name: "LoginView",
  data() {
    return {
      user: {
        username: "libai",
        password: "123"
      },
      loading: false
    }
  },
  methods: {
    doLogin() {
      this.loading = 'true'
      //data就是请求成功后返回的数据,但可能是undefined,因为这个data是api工具类里面,做了一次处理,不是原味的了,要看这个处理具体逻辑,可能处理的不好,又或者故意,把响应数据处理没了.那么这里返回的就是空,也就是undefined,比如api里的预处理,就是响应状态200,业务代码500,还是走then,但已经预处理的.所以没必要返回具体数据,返回空就型.
      postKeyValueRequest('/login', this.user).then(data => {
        this.loading=false;
        //所以这里根据data是否有数据,如果没有证明已经预处理的.就什么都不用做,如果有数据,证明响应码200,业务码200,正常登录
        if (data) {
          //如果有数据,把数据存入application的storage中
          //这个浏览器存储storage是k-v形式,而且只能存字符串.而服务器返回是json对象,所以要装成字符串
          //data.data ,前面的data是服务器返回的数据在上面then里命名的,objcet是浏览器返回json对象的object节点.老师的是data
          window.sessionStorage.setItem("currentHr", JSON.stringify(data.object))
          let redirect = this.$route.query.redirect; //提取路径中redirect的参数值

          //页面跳转,
          // this.$router.replace('/home')

          //如果redirect有值就去redirect 不是通过访问内页,只是输入登录页,redirect就是空
          // 没有就去home.
          this.$router.replace(redirect ? redirect : '/home')

        }


      })

      // //发起一个 post 请求，异步请求
      // axios.post('/login', this.user,{
      //   //在这里进行参数格式的转换
      //   //data 实际上就是用户传的 json 数据
      //   //{username:'admin',password:'123'}
      //   transformRequest: [function (data, headers) {
      //     let ret = '';
      //     for (let i in data) {
      //       ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
      //     }
      //     return ret;
      //   }],
      //   headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      // })
      //     //请求成功的回调，HTTP响应状态码为 200 的回调
      //     .then(function (response) {
      //       alert(JSON.stringify(response.data));
      //     })
      //     //状态码为 500 的回调
      //     .catch(function (error) {
      //       console.log(error);
      //     });
    }
  }

}
</script>

<style scoped>

/*.clearfix:before,*/
/*.clearfix:after {*/
/*  display: table;*/
/*  content: "";*/
/*}*/

/*.clearfix:after {*/
/*  clear: both*/
/*}*/

.box-card {
  width: 380px;

}

.box-card-div {
  display: flex;
  justify-content: center;
}

/*#loginButton {*/
/*  display: flex;*/
/*  justify-content: center;*/

/*  !*margin-left: 100px;*!*/
/*}*/


</style>